<template>
	<view class="home">
		<!-- 小程序收藏提示组件 -->
		<v-tips></v-tips>
		<!-- 上拉加载更多and下拉刷新组件 此为调用原生滚动组件 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="swiper-cont">
				<!-- 普通组件：轮播图组件 type=three 3d样式 card 卡片样式 -->
				<v-swiper :list="swipers" type="card" :autoplay="autoplay" @clickswiper="onClickSwiper"></v-swiper>
				<view class="swiper-cont-bg-icon"></view>
			</view>
			<!-- 业务组件：预约模块 -->
			<v-subscribe :info="apmtInfo" :total="apmtTotal" @update="getHome"></v-subscribe>
			<!-- 内容模块 -->
			<!-- 儿童戏剧 -->
			<view class="home-module" v-if="modelList && modelList.length > 0" v-for="(item, index) in modelList" :key="index">
				<view class="home-module-title">
					<image class="icon1" src="../../../static/icon/ertong.png" mode="widthFix"></image>
					{{item.title}}
				</view>
				<!-- 横向滚动组件 -->
				<v-scrollx>
					<video-item class="video-item" v-for="(item, sonIndex) in item.list" :key="sonIndex" :item="item" />
				</v-scrollx>
			</view>
		</mescroll-body>
		<v-loading v-if="loading"></v-loading>
		<view class="bottom_shadow"></view>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import vTips from '@/components/tips/tips.vue';
import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
import vSwiper from '@/components/swiper/swiper.vue';
import vSubscribe from './com/subscribe.vue';
import vScrollx from './com/scroll-x.vue';
import videoItem from '@/components/video-item/video-item.vue';
import HomeApi from '@/api/home.js';

export default {
	mixins: [MescrollMixin],
	components: {
		MescrollEmpty,
		vTips, // 收藏小程序提示
		vSwiper, // 轮播图
		vSubscribe, // 预约模块
		vScrollx, // 横向滚动
		videoItem
	},
	data() {
		return {
			autoplay: true, // 轮播组件是否自动轮播
			loading: true, // 页面加载状态

			// 下拉刷新的常用配置
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				native: false
			},
			// 上拉加载的常用配置
			upOption: {
				use: false, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			},
			// 缺省配置
			emptyOption: {
				tip: '没有更多内容了~',
				btnText: '确定'
			},
			// 轮播图数据
			swipers: [],
			// 模块数据
			modelList: [],
			apmtInfo: null,
			apmtTotal: 0
		};
	},
	// 计算属性
	computed: {
		userAccredit() {
			return this.$store.state.userAccredit;
		}
	},
	// 监听页面加载
	onLoad() {
		
	},
	// 监听页面显示
	onShow() {
		this.getHome();
		this.autoplay = true;
	},
	methods: {
		// 下拉刷新回调
		downCallback() {
			this.getHome();
		},
		// 请求首页数据
		async getHome() {
			const res = await HomeApi.GetHome();
			console.log(res);
			this.swipers = res.banner_list;
			this.modelList = res.model_list;
			this.apmtInfo = res.apmt_info ? res.apmt_info : null;
			this.apmtTotal = res.apmt_total;
			this.$nextTick(()=> {
				this.loading = false
				this.mescroll.endSuccess();
			})
		},
		// 这个后边是要清里的
		emptyClick() {
			if (this.userAccredit) {
				this.$refs.accredit.show();
				return;
			}
		},
		// 轮播图点击事件
		onClickSwiper(item) {
			let url = `/pages/market/article/article?id=${item.id}`;
			this.onGoNext(url);
		},
		GetUserSuccess() {
			this.$refs.accredit.close();
		},
		onSelected(e) {
			console.log(e);
		},
		buttonClick() {
			if (this.userAccredit) {
				this.$refs.accredit.show();
				return;
			}
			this.$refs.date.onConfirm();
		}
	},
	// 监听页面隐藏
	onHide() {
		this.autoplay = false;
	},
	// 监听页面卸载
	onUnload() {
		this.autoplay = false;
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f5f3;
}
.date-picker {
	padding: 30rpx 0;
}

.home {
	.swiper-cont {
		height: 400rpx;
		background-color: $bg-color-main;
		position: relative;
		&-bg-icon {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
			width: 100%;
			height: 60rpx;
			background-size: 100% 100%;
			background-image: $bg-icon-main;
		}
	}
	&-module {
		margin-bottom: 20rpx;
		&-title {
			padding: 0 20rpx;
			display: flex;
			align-items: flex-end;
			font-size: $font-size-base;
			color: $text-color;
			font-weight: bold;
			.icon1 {
				width: 55rpx;
				height: 63rpx;
			}
			.icon2 {
				width: 47rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
		.video-item {
			margin-right: 20rpx;
			display: inline-block;
			&:last-child {
				margin-right: 0;
			}
		}
	}
}
</style>
